<template>
    <div id="app" class="role">
        <div class="main">
            <div class="nav">
                <div>

                </div>
                <div class="addRole" @click="addClick">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="cont" v-loading="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div>角色名称</div>
                        <div>创建时间</div>
                        <div>CODE</div>
                        <div>操作</div>
                    </li>
                    <li class="dataLi" v-for="(item,index) in items" v-if="isDatas">
                        <div>{{item.name}}</div>
                        <div>{{item.createDate | ctimeFun}}</div>
                        <div>{{item.code}}</div>
                        <div>
                            <small @click="findClick(index)">
                                <span class="glyphicon glyphicon-zoom-in"></span>查看
                            </small>
                            <small @click="updateClick(index)">
                                <span class="glyphicon glyphicon-edit"></span>修改
                            </small>
                            <small @click="resourceClick(index)">
                                <span class="glyphicon glyphicon-edit"></span>资源
                            </small>
                            <small @click="deleteClick(index)">
                                <template>
                                   <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                                </template>
                            </small>
                        </div>
                    </li>
                    <li class="nullLi" v-else>
                        <div>暂时没有数据</div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination class="elLastPag" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSizeNum" :current-page="currentPage" layout="total, sizes, prev, pager, next"
                                :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加角色-->
        <div :class="{addRolePopup:isAddRolePopup,addRoleShow:isAddRoleShow}">
            <transition name="slide-fade">
                <div class="addRoleP" v-show="addShow" v-loading="adding" element-loading-text="正在添加中...">
                    <div class="addPTitle">添加角色</div>
                    <ul class="addPUl">
                        <li class="addPLi">
                            <div>角色名称：</div>
                            <div><input type="text" v-model="addObj.name" placeholder="请输入角色名称"></div>
                        </li>
                        <li class="addPLi">
                            <div>Code：</div>
                            <div><input type="text" v-model="addObj.code" placeholder="请输入角色Code"></div>
                        </li>
                        <li class="butLi">
                            <div @click="cancelClick">
                                取消
                            </div>
                            <div @click="addRoleClick">
                                确认
                            </div>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <!--角色详情-->
        <div :class="{detailsPopup:isDetailsPopup,detailsShowPo:isDetailsShowPo}">
            <transition name="slide-fade">
                <div class="addRoleP" v-show="dateilsShow" v-loading="adding" element-loading-text="正在添加中...">
                    <div class="addPTitle">角色详情</div>
                    <ul class="detailsPUl">
                        <li class="detailsPLi">
                            <div>角色名称：</div>
                            <div>{{detailsObj.name}}</div>
                        </li>
                        <li class="detailsPLi">
                            <div>Code：</div>
                            <div>{{detailsObj.code}}</div>
                        </li>
                        <li class="detailsPLi">
                            <div>创建时间：</div>
                            <div>{{detailsObj.createDate | ctimeFun}}</div>
                        </li>
                        <li class="detailsPLi">
                            <div>更新时间：</div>
                            <div>{{detailsObj.updateDate | ctimeFun}}</div>
                        </li>
                        <li class="detailsPLi">
                            <div>ID：</div>
                            <div>{{detailsObj.id}}</div>
                        </li>
                        <li class="butLi">
                            <div @click="cancelClick">
                                确认
                            </div>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <!--更新角色-->
        <div :class="{updateRolePopup:isUpdateRolePopupRolePopup,updateRolePopupRoleShow:isUpdateRolePopupRoleShow}">
            <transition name="slide-fade">
                <div class="addRoleP" v-show="updateShow" v-loading="updateing" element-loading-text="正在添加中...">
                    <div class="addPTitle">更新角色信息</div>
                    <ul class="updatePUl">
                        <li class="addPLi">
                            <div>角色名称：</div>
                            <div><input type="text" v-model="updateObj.name" placeholder="请输入新的角色名称"></div>
                        </li>
                        <li class="addPLi">
                            <div>Code：</div>
                            <div><input type="text" v-model="updateObj.code" placeholder="请输入新的角色Code"></div>
                        </li>
                        <li class="butLi">
                            <div @click="cancelClick">
                                取消
                            </div>
                            <div @click="updateRoleClick">
                                确认
                            </div>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
        <!--角色资源-->
        <div :class="{resourcePopup:isresourcePopup,resourceShowPo:isresourceShowPo}">
            <transition name="slide-fade">
                <div class="resourceRoleP" v-show="resourceShow" v-loading="adding" element-loading-text="正在加载中...">
                    <div class="addPTitle">角色资源</div>
                    <div class="resourceTerr">
                        <div>
                            <el-tree class="allConttree" :data="dataResour" show-checkbox node-key="id" ref="tree" highlight-current accordion :default-expanded-keys="showArrs"
                                :props="defaultProps">
                                </el-tree>
                        </div>
                        <div class="resourceTerrPath">
                            <ul>
                                <li class="firstLi">
                                    <div>名称</div>
                                    <div>code</div>
                                    <div>path</div>
                                    <div>权限</div>
                                </li>
                                <li class="dataLi" v-for="(item,index) in TerrPaths" v-if="isDatas">
                                    <div>{{item.name}}</div>
                                    <div>{{item.code}}</div>
                                    <div>{{item.path}}</div>
                                    <div>{{item.permissions}}</div>
                                </li>
                                <li class="nullLi" v-else>
                                    <div>暂时没有数据</div>
                                </li>
                                <li class="lastLi">
                                    <div class="lastSel">
                                        <el-pagination class="elLastPag" @size-change="TherhandleSizeChange" @current-change="TherhandleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                            :page-size="TherpageSizeNum" :current-page="ThercurrentPage" layout="total, sizes, prev, pager, next"
                                            :total="ThertotalNum">
                                            </el-pagination>
                                    </div>
                                    <div class="lastPag">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="resourceBut">
                        <div @click="resourceAddClick">保存</div>
                        <div @click="cancelClick">取消</div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'role',
        data() {
            return {
                isAddRolePopup: true,
                isAddRoleShow: true,
                addShow: false,
                isDetailsPopup: true,
                isDetailsShowPo: true,
                dateilsShow: false,
                isUpdateRolePopupRolePopup: true,
                isUpdateRolePopupRoleShow: true,
                updateShow: false,
                isresourcePopup: true,
                isresourceShowPo: true,
                resourceShow: false,
                dataResour: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                pageSizeNum: 10,
                currentPage: 1,
                totalNum: 0,
                items: [],
                isDatas: false,
                loading: false,
                adding: false,
                updateing: false,
                addObj: {
                    name: '',
                    code: ''
                },
                detailsObj: {
                    id: '',
                    createDate: '',
                    updateDate: '',
                    name: '',
                    code: '',
                    logicDelete: ''
                },
                updateObj: {
                    id: '',
                    name: '',
                    code: ''
                },
                roleInd: '',
                addLength: '',
                delLength: '',
                showArrs: [],
                isDatas: true,
                ThercurrentPage: 10,
                TherpageSizeNum: 1,
                ThertotalNum: 0,
                TerrPaths: []

            }
        },
        created: function () {
            var self = this
            self.loading = true
            // 获取所用用户信息
            self.getRoleAllPage({
                pageNo: self.currentPage,
                pageSize: self.pageSizeNum
            }).then((data) => {
                console.log(data)
                if (data.code === 200) {
                    if (data.data.content.length > 0) {
                        self.isDatas = true
                        self.items = data.data.content
                        self.totalNum = data.data.totalElements
                        self.loading = false
                    } else {
                        self.isDatas = false
                        self.loading = false
                    }
                }
            }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                    case 500:
                        break;
                    case 504:
                        break;
                    default:
                        break;
                }
            })

            self.getFindResourceTree({
            }).then((data) => {
                console.log(data)
                if (data.code === 200) {
                    if (data.data.length > 0) {
                        self.dataResour = data.data
                    } else {
                    }
                } else {
                }
            }).catch(msg => {
                console.log(msg)
                switch (msg.status) {
                    case 500:
                        break;
                    case 504:
                        break;
                    default:
                        break;
                }
            })
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                var second = now.getSeconds();
                second = second > 9 ? second : "0" + second
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute + ":" + second;
            }
        },
        methods: {
            // 每页个数
            handleSizeChange(val) {
                var self = this
                self.loading = true
                // 获取所用用户信息
                self.pageSizeNum = val
                self.currentPage = 1
                self.getRoleAllPage({
                    pageNo: 1,
                    pageSize: val
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.content.length > 0) {
                            self.isDatas = true
                            self.items = data.data.content
                            self.totalNum = data.data.totalElements
                            self.loading = false
                        } else {
                            self.isDatas = false
                            self.loading = false
                        }
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this
                self.loading = true
                // self.currentPage = val
                // 获取所用用户信息
                self.getRoleAllPage({
                    pageNo: val,
                    pageSize: self.pageSizeNum
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        if (data.data.content.length > 0) {
                            self.isDatas = true
                            self.items = data.data.content
                            self.totalNum = data.data.totalElements
                            self.loading = false
                        } else {
                            self.isDatas = false
                            self.loading = false
                        }
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 分页-每页显示
            TherhandleSizeChange(val) {
            },
            // 分页-上下页
            TherhandleCurrentChange(val) {
            },
            // 取消弹出框
            cancelClick() {
                this.isAddRoleShow = true
                this.addShow = false
                this.isDetailsShowPo = true
                this.dateilsShow = false
                this.isUpdateRolePopupRoleShow = true
                this.updateShow = false
                this.isresourceShowPo = false
                this.resourceShow = true
                this.isresourceShowPo = true
                this.resourceShow = false
                this.$refs.tree.setCheckedKeys([]);
                this.addObj.name = ''
                this.addObj.code = ''
                this.updateObj.name = ''
                this.updateObj.code = ''
            },
            // 添加角色弹出框
            addClick() {
                this.isAddRoleShow = false
                this.addShow = true
            },
            // 点击添加
            addRoleClick() {
                var self = this
                self.adding = true
                console.log(self.addObj.name)
                // 获取所用用户信息
                self.getAddRole(
                    self.addObj
                ).then((data) => {
                    console.log(data)
                    self.adding = false
                    if (data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        self.addObj.name = ''
                        self.addObj.code = ''
                        self.isAddRoleShow = true
                        self.addShow = false
                        self.loading = true
                        self.getRoleAllPage({
                            pageNo: self.currentPage,
                            pageSize: self.pageSizeNum
                        }).then((data) => {
                            console.log(data)
                            if (data.code === 200) {
                                if (data.data.content.length > 0) {
                                    self.isDatas = true
                                    self.items = data.data.content
                                    self.totalNum = data.data.totalElements
                                    self.loading = false
                                } else {
                                    self.isDatas = false
                                    self.loading = false
                                }
                            }
                        }).catch(msg => {
                            console.log(msg)
                            switch (msg.status) {
                                case 500:
                                    break;
                                case 504:
                                    break;
                                default:
                                    break;
                            }
                        })
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 查看角色
            findClick(index) {
                var self = this
                this.isDetailsShowPo = false
                this.dateilsShow = true
                // 获取所用用户信息
                self.getFindRoleId({
                    id: self.items[index].id
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        self.detailsObj = data.data
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 修改角色
            updateClick(index) {
                var self = this
                this.isUpdateRolePopupRoleShow = false
                this.updateShow = true
                this.updateObj.id = this.items[index].id
                self.getFindRoleId({
                    id: self.updateObj.id
                }).then((data) => {
                    console.log(data)
                    if (data.code === 200) {
                        self.updateObj = data.data
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })


            },
            // 修改角色
            updateRoleClick() {
                var self = this
                self.updateing = true
                // 获取所用用户信息
                self.getRoleUpdate(
                    self.updateObj
                ).then((data) => {
                    console.log(data)
                    self.updateing = false
                    if (data.code === 200 && data.message == 'success') {
                        self.loading = true
                        self.$message({
                            type: 'success',
                            message: '修改成功'
                        });
                        self.updateObj.name = ''
                        self.updateObj.code = ''
                        self.isUpdateRolePopupRoleShow = true
                        self.updateShow = false
                        self.getRoleAllPage({
                            pageNo: self.currentPage,
                            pageSize: self.pageSizeNum
                        }).then((data) => {
                            console.log(data)
                            if (data.code === 200) {
                                if (data.data.content.length > 0) {
                                    self.isDatas = true
                                    self.items = data.data.content
                                    self.totalNum = data.data.totalElements
                                    self.loading = false
                                } else {
                                    self.isDatas = false
                                    self.loading = false
                                }
                            }
                        }).catch(msg => {
                            console.log(msg)
                            switch (msg.status) {
                                case 500:
                                    break;
                                case 504:
                                    break;
                                default:
                                    break;
                            }
                        })
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
            },
            // 删除角色
            deleteClick(index) {
                var self = this
                var nameStr = "此操作将删除 " + self.items[index].name + " 该角色,是否继续 ?"
                this.$confirm(nameStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.loading = true
                    self.getDelRole({
                        id: self.items[index].id
                    }).then((data) => {
                        console.log(data)
                        if (data.code === 200 && data.message == 'success') {
                            self.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            self.getRoleAllPage({
                                pageNo: self.currentPage,
                                pageSize: self.pageSizeNum
                            }).then((data) => {
                                console.log(data)
                                if (data.code === 200) {
                                    if (data.data.content.length > 0) {
                                        self.isDatas = true
                                        self.items = data.data.content
                                        self.totalNum = data.data.totalElements
                                        self.loading = false
                                    } else {
                                        self.isDatas = false
                                        self.loading = false
                                    }
                                }
                            }).catch(msg => {
                                console.log(msg)
                                switch (msg.status) {
                                    case 500:
                                        break;
                                    case 504:
                                        break;
                                    default:
                                        break;
                                }
                            })
                        }
                    }).catch(msg => {
                        console.log(msg)
                        switch (msg.status) {
                            case 500:
                                break;
                            case 504:
                                break;
                            default:
                                break;
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 角色资源
            resourceClick(index) {
                var self = this
                self.isresourceShowPo = false
                self.resourceShow = true
                self.roleInd = index
                self.adding = true
                self.getFindRolResource({
                    roleId: self.items[index].id
                }).then((data) => {
                    console.log(data)
                    self.addLength = data.data.length
                    if (data.data.length > 0) {
                        self.$refs.tree.setCheckedNodes(data.data);
                    }
                    self.adding = false
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })
                // 角色资源路径和权限
                self.getPathRolResource({
                    roleId: self.items[index].id
                }).then((data) => {
                    console.log(data)
                    if (data.code == 200) {
                        self.TerrPaths = data.data
                        self.ThertotalNum = data.data.length
                    }
                }).catch(msg => {
                    console.log(msg)
                    switch (msg.status) {
                        case 500:
                            break;
                        case 504:
                            break;
                        default:
                            break;
                    }
                })

            },
            // 拼接资源id 和 权限
            resourcesFun(arr) {
                var obj = {
                    retArrs: [],
                    gpArrs: []
                }
                for (var i = 0; i < arr.length; i++) {
                    obj.retArrs.push(arr[i].id)
                    obj.gpArrs.push('{get:true,post:true}')
                    if (obj.retArrs.length == arr.length) {
                        return obj
                    }
                }
            },
            // 保存角色资源
            resourceAddClick() {
                var self = this
                var reouObj = this.$refs.tree.getCheckedNodes()
                self.delLength = reouObj.length
                console.log(self.delLength, self.addLength)
                if (reouObj.length > 0) {
                    var obj = this.resourcesFun(reouObj)
                    var resourcesIdStr = obj.retArrs.join("##")
                    var permissionStr = obj.gpArrs.join("##")
                    // 删除资源
                    self.adding = true
                    self.getDelRolResource({
                        roleId: self.items[self.roleInd].id
                    }).then((data) => {
                        if (data.code == 200) {
                            self.getAddRolResource({
                                roleId: self.items[self.roleInd].id,
                                resourcesId: resourcesIdStr,
                                permission: permissionStr
                            }).then((data) => {
                                self.adding = false
                                if (data.code == 200) {
                                    self.$message('保存成功')
                                }
                            }).catch(msg => {
                                console.log(msg)
                                switch (msg.status) {
                                    case 500:
                                        break;
                                    case 504:
                                        break;
                                    default:
                                        break;
                                }
                            })
                        }
                    }).catch(msg => {
                        console.log(msg)
                        switch (msg.status) {
                            case 500:
                                break;
                            case 504:
                                break;
                            default:
                                break;
                        }
                    })
                } else {
                    // 删除所有资源
                    self.adding = true
                    self.getDelRolResource({
                        roleId: self.items[self.roleInd].id
                    }).then((data) => {
                        if (data.code == 200) {
                            self.$message('删除成功')
                        }
                        self.adding = false
                    }).catch(msg => {
                        console.log(msg)
                        switch (msg.status) {
                            case 500:
                                break;
                            case 504:
                                break;
                            default:
                                break;
                        }
                    })
                }
            },
            ...mapActions(['getRoleAllPage','getAddRole','getDelRole','getFindRoleId','getRoleUpdate','getFindRolResource','getAddRolResource','getDelRolResource','getDelOneRolResource','getPathRolResource','getFindResourceTree'])
        }
    }

</script>

<style scoped>
    .role {
        width: 100%;
        display: flex;
        justify-content: center;
        min-height: 600px;
        height: 100%;
        overflow: hidden;
    }
    
    .main {
        width: 96%;
        min-height: 600px;
        height: 100%;
        border: 1px solid #8492a6;
        border-top: 2px solid #58b7ff;
        border-radius: 3px;
        box-shadow: 0px 5px 5px #d3dce6;
        margin-bottom: 20px;
    }
    
    .nav {
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #8492a6;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .addRole {
        line-height: 32px;
        width: 65px;
        height: 33px;
        margin-right: 40px;
        text-align: center;
        background-color: #fafafa;
        color: #000;
        font-size: 13px;
        border: 1px solid #ddd;
        border-radius: 3px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .addRole span {
        font-size: 12px;
        margin-right: 5px;
    }
    
    .cont {
        width: 100%;
        min-height: 550px;
        height: 100%;
    }
    
    .cont>ul>li {
        display: flex;
        border-bottom: 1px solid #8492a6;
        height: 45px;
        line-height: 45px;
        text-align: center;
        overflow: hidden;
    }
    
    .cont>ul>li>div {
        width: 25%;
        border-left: 1px solid #8492a6;
    }
    
    .cont>ul>li>div:nth-child(4) {
        min-width: 345px;
    }
    
    .cont>ul>li>div:nth-child(1) {
        border-left: 0;
    }
    
    .cont>ul .firstLi {
        background-color: #e5e9f2;
    }
    
    .cont > ul .dataLi > div:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .cont > ul .dataLi > div:last-child small {
        cursor: pointer;
        border: 1px solid #ddd;
        color: #666;
        font-size: 14px;
        display: inline-block;
        min-width: 75px;
        margin-right: 5px;
        margin-left: 5px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        color: #fff;
    }
    
    .cont > ul .dataLi > div:last-child small:nth-child(1) {
        background-color: #f8b252;
    }
    
    .cont > ul .dataLi > div:last-child small:nth-child(2) {
        background-color: #ef7383;
    }
    
    .cont > ul .dataLi > div:last-child small:nth-child(4) {
        background-color: #58b7ff;
    }
    
    .cont > ul .dataLi > div:last-child small:nth-child(3) {
        background-color: #58b7ff;
    }
    
    .cont>ul .nullLi>div:nth-child(1) {
        width: 100%;
        text-align: center;
    }
    
    .cont>ul .dataLi>div:last-child small span {
        font-size: 12px;
        margin-right: 3px;
        color: #fff;
    }
    
    .elbut {
        color: #fff;
        margin: 0;
        padding: 0;
    }
    
    .lastSel {
        height: 45px;
    }
    
    .cont>ul .lastLi>div {
        border-left: 0;
        margin-top: 7px;
    }
    
    .elLastPag {
        height: 45px;
    }
    /*添加角色--*/
    
    .addRolePopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .addRoleP {
        width: 450px;
        min-height: 200px;
        background-color: #fff;
        border-radius: 5px;
    }
    
    .addPTitle {
        width: 100%;
        height: 50px;
        font-size: 20px;
        text-align: center;
        font-weight: 600;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
    
    .addPLi {
        display: flex;
        height: 70px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .addPLi>div:nth-child(1) {
        width: 150px;
        text-align: right;
        padding-right: 15px;
        font-size: 15px;
    }
    
    .addPLi>div:nth-child(2) input {
        width: 280px;
        height: 35px;
        border: 1px solid #ccc;
        border-radius: 3px;
        line-height: 35px;
        padding-left: 5px;
    }
    
    .butLi {
        display: flex;
        justify-content: flex-end;
        height: 60px;
        width: 100%;
        align-items: center;
        border-top: 1px solid #ccc;
    }
    
    .butLi>div {
        width: 90px;
        height: 35px;
        border: 1px solid #ccc;
        border-radius: 3px;
        line-height: 35px;
        font-size: 15px;
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
    
    .addRoleShow {
        display: none;
    }
    /*详情弹出框*/
    
    .detailsPopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .detailsPLi {
        display: flex;
        height: 50px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .detailsPLi>div:nth-child(1) {
        width: 150px;
        text-align: right;
        padding-right: 15px;
        font-size: 15px;
    }
    
    .detailsPLi>div:nth-child(2) {
        width: 280px;
        height: 35px;
        border: 1px solid #ccc;
        border-radius: 3px;
        line-height: 35px;
        padding-left: 5px;
    }
    
    .detailsShowPo {
        display: none;
    }
    /*更新角色信息*/
    
    .updateRolePopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .updateRolePopupRoleShow {
        display: none;
    }
    /*角色资源*/
    
    .resourcePopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .resourceRoleP {
        width: 900px;
        min-height: 200px;
        background-color: #fff;
        border-radius: 5px;
    }
    
    .resourceShowPo {
        display: none;
    }
    
    .resourceTerr {
        width: 100%;
        min-height: 500px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 15px;
        padding-top: 5px;
        display: flex;
        height: 100%;
    }
    
    .allConttree {
        border: 0;
    }
    
    .resourceTerr>div:nth-child(1) {
        width: 200px;
        height: 100%;
        min-height: 500px;
        border: 1px solid #ccc;
    }
    
    .resourceTerr>div:nth-child(2) {
        width: 680px;
        border: 1px solid #ccc;
        height: 100%;
        height: 500px;
        margin-left: 10px;
        overflow: hidden;
        overflow-y: scroll;
    }
    
    .resourceTerrPath {}
    
    .resourceTerrPath {
        width: 100%;
        height: 500px;
        height: 100%;
    }
    
    .resourceTerrPath > ul > li {
        display: flex;
        border-bottom: 1px solid #8492a6;
        height: 45px;
        line-height: 45px;
        text-align: center;
        overflow: hidden;
    }
    
    .resourceTerrPath > ul > li > div {
        border-right: 1px solid #8492a6;
    }
    
    .resourceTerrPath > ul > li > div:nth-child(1) {
        border-left: 0;
        width: 20%;
    }
    
    .resourceTerrPath > ul > li > div:nth-child(2) {
        width: 23%;
    }
    
    .resourceTerrPath > ul > li > div:nth-child(3) {
        width: 35%;
    }
    
    .resourceTerrPath > ul > li > div:nth-child(4) {
        width: 22%;
    }
    
    .resourceTerrPath > ul .firstLi {
        background-color: #e5e9f2;
    }
    
    .resourceTerrPath > ul .lastLi {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .resourceTerrPath > ul .dataLi > div:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .resourceTerrPath > ul .nullLi > div:nth-child(1) {
        width: 100%;
        text-align: center;
    }
    
    .resourceTerrPath > ul .dataLi > div:last-child small span {
        font-size: 12px;
        margin-right: 3px;
        color: #fff;
    }
    
    .resourceTerrPath .elbut {
        color: #fff;
        margin: 0;
        padding: 0;
    }
    
    .resourceTerrPath .lastSel {
        height: 45px;
    }
    
    .resourceTerrPath > ul .lastLi > div {
        border-left: 0;
        margin-top: 15px;
    }
    
    .resourceBut {
        display: flex;
        justify-content: flex-end;
        height: 60px;
        width: 100%;
        align-items: center;
        border-top: 1px solid #ccc;
    }
    
    .resourceBut>div {
        width: 90px;
        height: 35px;
        border: 1px solid #ccc;
        border-radius: 3px;
        line-height: 35px;
        font-size: 15px;
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
    /*------------------------------------------*/
    
    .slide-fade-enter-active {
        transition: all 0.7s ease;
    }
    
    .slide-fade-enter,
    .slide-fade-leave-active {
        transform: translateY(-30px);
        opacity: 0;
    }
</style>